import { PageProps } from "@/interfaces/app.interface"
import React, { useEffect, useCallback, useState, useRef } from "react"
import Head from '../components/head'
import Foot from '../components/foot'
import style from "./index.less"
import { getDefault, getImg, getMenu, getPro } from '@/api'
import { Pagination } from 'antd';
import Swiper from 'react-id-swiper';
import { prefix } from '@/utils/constant'
const newsPage = (props: PageProps) => {

    let [list, setList] = useState([])
    let [current, setCurrent] = useState(1)
    let [total, setTotal] = useState(0)
    let [index, setIndex] = useState(-1)
    let [per, setPer] = useState([])
    let [show, setShow] = useState(true)
    let [nav, setNav] = useState(2)
    let exhibitionId = props.location.query.i as string 
    const getPer = useCallback(
        (exhibitionId) => {
            getMenu({ exhibitionId}).then(res => {
                if (res[7].isDel == 1 && nav == 2) {
                    setNav(1)
                }
                if (res[4].isDel === 0) {
                    setPer(res)
                    setShow(false)
                }
            })
        },
        []
    )
    const getData = useCallback(
        (exhibitionId) => {
            getImg({ exhibitionId, pageSize: 12, currentPage: current }).then(res => {
                setTotal(res.count)
                setList(res.entities)
            })
        },
        [current],
    )
    useEffect(() => {
        if (exhibitionId) {
            getPer(exhibitionId)
            getData(exhibitionId)
        } else {
            getDefault().then(id => {
                getPer(id)
                getData(id)
            })
        }
    }, [current])

    const link = (index: any) => () => {
        setIndex(index)
    }

    const change = (page: number) => {
        setCurrent(page)
    }

    const home = () => {
        props.history.push('/')
    }

    const param = {
        navigation: {
            nextEl: '.swiper-button-next.swiper-button-white',
            prevEl: '.swiper-button-prev.swiper-button-white',
        },
        initialSlide: index,
        loop: true
    }

    return show ? null : <>
        <Head status={nav} per={per} id={exhibitionId}/>
        <div className={style.banner}>
            <img src={require('@/assets/img/ban2.png')} alt="" />
            <div>精彩瞬间</div>
        </div>
        <div className={style.nav}>
            <div className="wrap flex-start">
                <div style={{cursor: 'pointer'}} onClick={home}>首页</div>
                <span> &gt; </span>
                <div className={style.on}>精彩瞬间</div>
            </div>
        </div>

        <div className="wrap flex-wrap-start">
            {list.map((item, index) => <div key={index} className={`${style.item}`} onClick={link(index)}>
                <div className={`flex-center ${style.img}`}>
                    <img src={prefix + item.image} alt="" />
                </div>
                <div className={style.info}>
                    <div className={style.name}>{item.title}</div>
                    <div className={style.time}>{item.updateDate.slice(0,10)}</div>
                </div>
            </div>)}

        </div>

        <div className="page">
            <Pagination hideOnSinglePage showSizeChanger={false} current={current} total={total} onChange={change} />
        </div>

        <Foot />

        {
            index > -1 ?
                <div className="mask" >
                    <div className={style.cls} onClick={() => setIndex(-1)}>&times;</div>
                    <div className={style.banners}>
                        <Swiper {...param}>
                            {
                                list.map(item => {
                                    return <div key={item.id} className={`flex-center ${style.swiper}`}>
                                        <img src={prefix + item.image} alt="" />
                                    </div>
                                })
                            }
                           
                        </Swiper>
                    </div>
                </div>
                : null
        }


    </>

}


export default newsPage



